389. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2023-07-12 04:43:24 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

389.1 Files compared

#LocationFileLast Modified
1Porto v4.0.5/Theme Files/Porto Theme/app/design/frontend/Smartwave/porto_rtl/Magento_Checkout/web/css/source/module/checkout_shipping.less2021-02-04 09:27:02 +0000
2Porto v4.0.6/Theme Files/Porto Theme/app/design/frontend/Smartwave/porto_rtl/Magento_Checkout/web/css/source/module/checkout_shipping.less2021-02-04 09:27:02 +0000

389.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged1676
Changed00
Inserted00
Removed00

389.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

389.4 Active regular expressions

No regular expressions were active.

389.5 Comparison detail

1 // /** 1 // /**
2 //  * Copyright © 2015 Magento. All rights reserved. 2 //  * Copyright © 2015 Magento. All rights reserved.
3 //  * See COPYING.txt for license details. 3 //  * See COPYING.txt for license details.
4 //  */ 4 //  */
5  5 
6 // 6 //
7 //  Variables 7 //  Variables
8 //  _____________________________________________ 8 //  _____________________________________________
9  9 
10 @checkout-shipping-address__max-width: 500px; 10 @checkout-shipping-address__max-width: 500px;
11 @checkout-shipping-address__margin-top: 28px; 11 @checkout-shipping-address__margin-top: 28px;
12  12 
13 @checkout-shipping-item-icon__background-color: @checkout-shipping-item__active__border-color; 13 @checkout-shipping-item-icon__background-color: @checkout-shipping-item__active__border-color;
14 @checkout-shipping-item-icon__color: @color-white; 14 @checkout-shipping-item-icon__color: @color-white;
15 @checkout-shipping-item-icon__content: @icon-checkmark; 15 @checkout-shipping-item-icon__content: @icon-checkmark;
16  16 
17 @checkout-shipping-item__border: 2px solid transparent; 17 @checkout-shipping-item__border: 2px solid transparent;
18 @checkout-shipping-item__line-height: 30px; 18 @checkout-shipping-item__line-height: 30px;
19 @checkout-shipping-item__margin: 0 0 @indent__base; 19 @checkout-shipping-item__margin: 0 0 @indent__base;
20 @checkout-shipping-item__padding: @indent__base @indent__base @indent__base (@indent__l + 5px); 20 @checkout-shipping-item__padding: @indent__base @indent__base @indent__base (@indent__l + 5px);
21 @checkout-shipping-item__transition: .3s border-color; 21 @checkout-shipping-item__transition: .3s border-color;
22 @checkout-shipping-item__width: 100%/3; 22 @checkout-shipping-item__width: 100%/3;
23 @checkout-shipping-item-tablet__width: 100%/2; 23 @checkout-shipping-item-tablet__width: 100%/2;
24 @checkout-shipping-item-mobile__width: 100%; 24 @checkout-shipping-item-mobile__width: 100%;
25 @checkout-shipping-item__active__border-color: @color-orange-red1; 25 @checkout-shipping-item__active__border-color: @color-orange-red1;
26  26 
27 @checkout-shipping-item-icon__selected__height: 27px; 27 @checkout-shipping-item-icon__selected__height: 27px;
28 @checkout-shipping-item-icon__selected__width: 29px; 28 @checkout-shipping-item-icon__selected__width: 29px;
29  29 
30 @checkout-shipping-item-mobile__padding: 0 0 15px; 30 @checkout-shipping-item-mobile__padding: 0 0 15px;
31 @checkout-shipping-item-mobile__margin: @checkout-shipping-item-mobile__padding; 31 @checkout-shipping-item-mobile__margin: @checkout-shipping-item-mobile__padding;
32 @checkout-shipping-item-mobile__active__padding: 15px 18px 15px (@indent__l + 5px); 32 @checkout-shipping-item-mobile__active__padding: 15px 18px 15px (@indent__l + 5px);
33  33 
34 @checkout-shipping-item-before__border-color: @color-gray80; 34 @checkout-shipping-item-before__border-color: @color-gray80;
35 @checkout-shipping-item-before__height: calc(~"100% - 20px"); 35 @checkout-shipping-item-before__height: calc(~"100% - 20px");
36  36 
37 @checkout-shipping-method__border: @checkout-step-title__border; 37 @checkout-shipping-method__border: @checkout-step-title__border;
38 @checkout-shipping-method__padding: @indent__base; 38 @checkout-shipping-method__padding: @indent__base;
39  39 
40 // 40 //
41 //  Common 41 //  Common
42 //  _____________________________________________ 42 //  _____________________________________________
43  43 
44 & when (@media-common = true) { 44 & when (@media-common = true) {
45  45 
46     .opc-wrapper { 46     .opc-wrapper {
47  47 
48         // 48         //
49         //  Shipping Address 49         //  Shipping Address
50         //  --------------------------------------------- 50         //  ---------------------------------------------
51  51 
52         .form-login, 52         .form-login,
53         .form-shipping-address { 53         .form-shipping-address {
54             .lib-css(margin-top, @checkout-shipping-address__margin-top); 54             .lib-css(margin-top, @checkout-shipping-address__margin-top);
55             .lib-css(margin-bottom, @checkout-shipping-address__margin-top); 55             .lib-css(margin-bottom, @checkout-shipping-address__margin-top);
56             .fieldset { 56             .fieldset {
57                 .field { 57                 .field {
58                     .label { 58                     .label {
59                         font-weight: @font-weight__regular; 59                         font-weight: @font-weight__regular;
60                     } 60                     }
61                 } 61                 }
62                 .note { 62                 .note {
63                     font-size: @font-size__base; 63                     font-size: @font-size__base;
64                     margin-top: @indent__s; 64                     margin-top: @indent__s;
65                 } 65                 }
66             } 66             }
67         } 67         }
68  68 
69         .shipping-address-item { 69         .shipping-address-item {
70             &:extend(.abs-add-box-sizing all); 70             &:extend(.abs-add-box-sizing all);
71             .lib-css(border, @checkout-shipping-item__border); 71             .lib-css(border, @checkout-shipping-item__border);
72             .lib-css(font-size, @font-size__base); 72             .lib-css(font-size, @font-size__base);
73             .lib-css(line-height, @checkout-shipping-item__line-height); 73             .lib-css(line-height, @checkout-shipping-item__line-height);
74             .lib-css(margin, @checkout-shipping-item__margin); 74             .lib-css(margin, @checkout-shipping-item__margin);
75             .lib-css(padding, @checkout-shipping-item__padding); 75             .lib-css(padding, @checkout-shipping-item__padding);
76             .lib-css(transition, @checkout-shipping-item__transition); 76             .lib-css(transition, @checkout-shipping-item__transition);
77             .lib-css(width, @checkout-shipping-item-tablet__width); 77             .lib-css(width, @checkout-shipping-item-tablet__width);
78             display: inline-block; 78             display: inline-block;
79             position: relative; 79             position: relative;
80             vertical-align: top; 80             vertical-align: top;
81             word-wrap: break-word; 81             word-wrap: break-word;
82  82 
83             &.selected-item { 83             &.selected-item {
84                 .lib-css(border-color, @checkout-shipping-item__active__border-color); 84                 .lib-css(border-color, @checkout-shipping-item__active__border-color);
85  85 
86                 &:after { 86                 &:after {
87                     .lib-css(background, @checkout-shipping-item-icon__background-color); 87                     .lib-css(background, @checkout-shipping-item-icon__background-color);
88                     .lib-css(color, @checkout-shipping-item-icon__color); 88                     .lib-css(color, @checkout-shipping-item-icon__color);
89                     .lib-css(content, @checkout-shipping-item-icon__content); 89                     .lib-css(content, @checkout-shipping-item-icon__content);
90                     .lib-css(font-family, @icons__font-name); 90                     .lib-css(font-family, @icons__font-name);
91                     .lib-css(height, @checkout-shipping-item-icon__selected__height); 91                     .lib-css(height, @checkout-shipping-item-icon__selected__height);
92                     .lib-css(width, @checkout-shipping-item-icon__selected__width); 92                     .lib-css(width, @checkout-shipping-item-icon__selected__width);
93                     font-size: 19px; 93                     font-size: 19px;
94                     line-height: 21px; 94                     line-height: 21px;
95                     padding-top: 2px; 95                     padding-top: 2px;
96                     position: absolute; 96                     position: absolute;
97                     left: 0; 97                     left: 0;
98                     text-align: center; 98                     text-align: center;
99                     top: 0; 99                     top: 0;
100                 } 100                 }
101  101 
102                 .action-select-shipping-item { 102                 .action-select-shipping-item {
103                     &:extend(.abs-no-display-s all); 103                     &:extend(.abs-no-display-s all);
104                     visibility: hidden; 104                     visibility: hidden;
105                 } 105                 }
106             } 106             }
107         } 107         }
108  108 
109         .field { 109         .field {
110             &.addresses { 110             &.addresses {
111                 &:extend(.abs-add-clearfix all); 111                 &:extend(.abs-add-clearfix all);
112             } 112             }
113         } 113         }
114  114 
115         .action-show-popup { 115         .action-show-popup {
116             margin: 0 0 @indent__base; 116             margin: 0 0 @indent__base;
117             > span { 117             > span {
118                 &:before { 118                 &:before {
119                     content: '+'; 119                     content: '+';
120                     padding-right: @indent__xs; 120                     padding-right: @indent__xs;
121                 } 121                 }
122             } 122             }
123         } 123         }
124  124 
125         .action-select-shipping-item { 125         .action-select-shipping-item {
126             float: left; 126             float: left;
127             margin: @indent__base 0 0; 127             margin: @indent__base 0 0;
128         } 128         }
129  129 
130         .edit-address-link { 130         .edit-address-link {
131             &:extend(.abs-action-button-as-link all); 131             &:extend(.abs-action-button-as-link all);
132             display: block; 132             display: block;
133             float: right; 133             float: right;
134             margin: 26px 0 0 5px; 134             margin: 26px 0 0 5px;
135         } 135         }
136     } 136     }
137  137 
138     // 138     //
139     //  Shipping Methods 139     //  Shipping Methods
140     //  --------------------------------------------- 140     //  ---------------------------------------------
141  141 
142     .checkout-shipping-method { 142     .checkout-shipping-method {
143         .step-title { 143         .step-title {
144             margin-bottom: 0; 144             margin-bottom: 0;
145         } 145         }
146         .no-quotes-block { 146         .no-quotes-block {
147             margin: @indent__base 0; 147             margin: @indent__base 0;
148         } 148         }
149     } 149     }
150  150 
151     .methods-shipping { 151     .methods-shipping {
152         .actions-toolbar { 152         .actions-toolbar {
153             .action { 153             .action {
154                 &.primary { 154                 &.primary {
155                     &:extend(.abs-button-l all); 155                     &:extend(.abs-button-l all);
156                     margin: @indent__base 0 0; 156                     margin: @indent__base 0 0;
157                 } 157                 }
158             } 158             }
159         } 159         }
160     } 160     }
161  161 
162     .table-checkout-shipping-method { 162     .table-checkout-shipping-method {
163         thead { 163         thead {
164             th { 164             th {
165                 display: none; 165                 display: none;
166                 font-weight: 600; 166                 font-weight: 600;
167             } 167             }
168         } 168         }
169         tbody { 169         tbody {
170             td { 170             td {
171                 .lib-css(border-top, @checkout-shipping-method__border); 171                 .lib-css(border-top, @checkout-shipping-method__border);
172                 .lib-css(padding-bottom, @checkout-shipping-method__padding); 172                 .lib-css(padding-bottom, @checkout-shipping-method__padding);
173                 .lib-css(padding-top, @checkout-shipping-method__padding); 173                 .lib-css(padding-top, @checkout-shipping-method__padding);
174                 &:first-child { 174                 &:first-child {
175                     padding-left: 0; 175                     padding-left: 0;
176                     padding-right: 0; 176                     padding-right: 0;
177                     width: 20px; 177                     width: 20px;
178                 } 178                 }
179             } 179             }
180             tr { 180             tr {
181                 &:first-child { 181                 &:first-child {
182                     td { 182                     td {
183                         border-top: none; 183                         border-top: none;
184                     } 184                     }
185                 } 185                 }
186             } 186             }
187             .col-price { 187             .col-price {
188                 font-weight: @font-weight__semibold; 188                 font-weight: @font-weight__semibold;
189             } 189             }
190             .row-error { 190             .row-error {
191                 td { 191                 td {
192                     border-top: none; 192                     border-top: none;
193                     padding-bottom: @indent__s; 193                     padding-bottom: @indent__s;
194                     padding-top: 0; 194                     padding-top: 0;
195                 } 195                 }
196             } 196             }
197         } 197         }
198     } 198     }
199 } 199 }
200  200 
201 // 201 //
202 //  Mobile 202 //  Mobile
203 //  _____________________________________________ 203 //  _____________________________________________
204  204 
205 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { 205 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
206     .opc-wrapper { 206     .opc-wrapper {
207         .form-login, 207         .form-login,
208         .form-shipping-address, 208         .form-shipping-address,
209         .methods-shipping { 209         .methods-shipping {
210             .lib-css(margin, @checkout-step-content-mobile__margin); 210             .lib-css(margin, @checkout-step-content-mobile__margin);
211             .lib-css(padding, @indent__base @checkout-step-content-mobile__margin-s); 211             .lib-css(padding, @indent__base @checkout-step-content-mobile__margin-s);
212         } 212         }
213  213 
214         .form-login { 214         .form-login {
215             + .form-shipping-address { 215             + .form-shipping-address {
216                 .lib-css(margin-top, -(@checkout-step-content-mobile__margin-s)); 216                 .lib-css(margin-top, -(@checkout-step-content-mobile__margin-s));
217             } 217             }
218         } 218         }
219  219 
220         .shipping-address-item { 220         .shipping-address-item {
221             .lib-css(border-bottom, 1px solid @checkout-shipping-item-before__border-color); 221             .lib-css(border-bottom, 1px solid @checkout-shipping-item-before__border-color);
222             .lib-css(margin, @checkout-shipping-item-mobile__margin); 222             .lib-css(margin, @checkout-shipping-item-mobile__margin);
223             .lib-css(padding, @checkout-shipping-item-mobile__padding); 223             .lib-css(padding, @checkout-shipping-item-mobile__padding);
224             .lib-css(width, @checkout-shipping-item-mobile__width); 224             .lib-css(width, @checkout-shipping-item-mobile__width);
225             &.selected-item { 225             &.selected-item {
226                 .lib-css(padding, @checkout-shipping-item-mobile__active__padding); 226                 .lib-css(padding, @checkout-shipping-item-mobile__active__padding);
227                 border-bottom-width: 2px; 227                 border-bottom-width: 2px;
228  228 
229                 .edit-address-link { 229                 .edit-address-link {
230                     .lib-css(left, @checkout-shipping-item-icon__selected__width + @indent__s); 230                     .lib-css(left, @checkout-shipping-item-icon__selected__width + @indent__s);
231                 } 231                 }
232             } 232             }
233         } 233         }
234  234 
235         .action-select-shipping-item { 235         .action-select-shipping-item {
236             float: none; 236             float: none;
237             margin-top: @indent__s; 237             margin-top: @indent__s;
238             width: 100%; 238             width: 100%;
239         } 239         }
240  240 
241         .action-show-popup { 241         .action-show-popup {
242             width: 100%; 242             width: 100%;
243         } 243         }
244  244 
245         .methods-shipping { 245         .methods-shipping {
246             .lib-css(border-bottom, @checkout-step-title__border); 246             .lib-css(border-bottom, @checkout-step-title__border);
247             padding-top: @indent__l; 247             padding-top: @indent__l;
248         } 248         }
249  249 
250         .edit-address-link { 250         .edit-address-link {
251             .lib-icon-font( 251             .lib-icon-font(
252                 @icon-edit, 252                 @icon-edit,
253                 @_icon-font-size: 18px, 253                 @_icon-font-size: 18px,
254                 @_icon-font-line-height: 20px, 254                 @_icon-font-line-height: 20px,
255                 @_icon-font-text-hide: true, 255                 @_icon-font-text-hide: true,
256                 @_icon-font-color: @minicart-icons-color, 256                 @_icon-font-color: @minicart-icons-color,
257                 @_icon-font-color-hover: @primary__color, 257                 @_icon-font-color-hover: @primary__color,
258                 @_icon-font-color-active: @minicart-icons-color 258                 @_icon-font-color-active: @minicart-icons-color
259             ); 259             );
260             margin: 0; 260             margin: 0;
261             position: absolute; 261             position: absolute;
262             left: 0; 262             left: 0;
263             top: 5px; 263             top: 5px;
264         } 264         }
265     } 265     }
266 } 266 }
267  267 
268 // 268 //
269 //  Desktop 269 //  Desktop
270 //  _____________________________________________ 270 //  _____________________________________________
271  271 
272 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { 272 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
273     .checkout-shipping-method { 273     .checkout-shipping-method {
274         .actions-toolbar { 274         .actions-toolbar {
275             > .primary { 275             > .primary {
276                 float: left; 276                 float: left;
277             } 277             }
278             .action { 278             .action {
279                 &.primary { 279                 &.primary {
280                     margin: 0; 280                     margin: 0;
281                 } 281                 }
282             } 282             }
283         } 283         }
284     } 284     }
285     .opc-wrapper { 285     .opc-wrapper {
286         .form-login, 286         .form-login,
287         .form-shipping-address { 287         .form-shipping-address {
288             .lib-css(max-width, @checkout-shipping-address__max-width); 288             .lib-css(max-width, @checkout-shipping-address__max-width);
289         } 289         }
290  290 
291         .form-login { 291         .form-login {
292             .lib-css(border-bottom, @checkout-step-title__border); 292             .lib-css(border-bottom, @checkout-step-title__border);
293             padding-bottom: @indent__base; 293             padding-bottom: @indent__base;
294         } 294         }
295     } 295     }
296     .table-checkout-shipping-method { 296     .table-checkout-shipping-method {
297         width: auto; 297         width: auto;
298     } 298     }
299 } 299 }
300  300 
301 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) { 301 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
302     .opc-wrapper { 302     .opc-wrapper {
303         .shipping-address-item { 303         .shipping-address-item {
304             .lib-css(width, @checkout-shipping-item__width); 304             .lib-css(width, @checkout-shipping-item__width);
305  305 
306             &:before { 306             &:before {
307                 .lib-css(background, @checkout-shipping-item-before__border-color); 307                 .lib-css(background, @checkout-shipping-item-before__border-color);
308                 .lib-css(height, @checkout-shipping-item-before__height); 308                 .lib-css(height, @checkout-shipping-item-before__height);
309                 content: ''; 309                 content: '';
310                 right: 0; 310                 right: 0;
311                 position: absolute; 311                 position: absolute;
312                 top: 0; 312                 top: 0;
313                 width: 1px; 313                 width: 1px;
314             } 314             }
315  315 
316             &:nth-child(3n+1) { 316             &:nth-child(3n+1) {
317                 &:before { 317                 &:before {
318                     display: none; 318                     display: none;
319                 } 319                 }
320             } 320             }
321  321 
322             &.selected-item { 322             &.selected-item {
323                 &:before { 323                 &:before {
324                     display: none; 324                     display: none;
325                 } 325                 }
326  326 
327                 + .shipping-address-item { 327                 + .shipping-address-item {
328                     &:before { 328                     &:before {
329                         display: none; 329                         display: none;
330                     } 330                     }
331                 } 331                 }
332             } 332             }
333         } 333         }
334     } 334     }
335     .table-checkout-shipping-method { 335     .table-checkout-shipping-method {
336         min-width: 500px; 336         min-width: 500px;
337     } 337     }
338 } 338 }